<template>
    <a-modal :title="formTile + '分类'" :visible="true" width="60%" :footer="null" @cancel="reset">
        <a-card>
            <a-row type="flex" justify="start" align="top">
                <a-col :span="24">
                    <a-form :form="form" @submit="handleSubmit" :labelCol="formItemLayout.labelCol"
                        :wrapperCol="formItemLayout.wrapperCol">
                        <a-form-item label="分类名称" :required="true">
                            <a-input placeholder="请输入分类名称" :maxLength="40" allow-clear v-decorator="[
                                `name`,
                                {
                                    validateTrigger: ['change', 'blur'],
                                    rules: [
                                        {
                                            required: true,
                                            whitespace: true,
                                            message: '请输入分类名称'
                                        }
                                    ]
                                }
                            ]" />
                        </a-form-item>
                        <a-row>
                            <a-col :span="16" :offset="8" class="info-action">
                                <a-button type="primary" @click="reset">返回</a-button>
                                <a-button type="primary" class="ml-20" html-type="submit" :loading="loading">保存</a-button>
                            </a-col>
                        </a-row>
                    </a-form>
                </a-col>
            </a-row>
        </a-card>
    </a-modal>
</template>
  
<script>
import debounce from 'lodash/debounce'
import { getSystemPro, createCategory, updateCategory } from '@api/pattern/index.js'
import { isTrue } from '../util/utils.js'
export default {
    props: {
        content: {
            type: Object,
            default: null,
            required: false,
        },
        type: {
            type: Number,
            default: null,
            required: false,
        },
    },

    data() {
        this.searchBrand = debounce(this.searchBrand, 800)
        return {
            current: 1,
            size: 1000,
            total: 0,
            linkName: '',
            loading: false,
            fileds: [],
            uploading: false,
            templates: [],
            formItemLayout: {
                labelCol: {
                    xl: { span: 5 },
                    xs: { span: 5 },
                    sm: { span: 6 }
                },
                wrapperCol: {
                    xl: { span: 8 },
                    xs: { span: 12 },
                    sm: { span: 12 }
                }
            },
            fileList: [],
            imageUrl: '',
            loading: false,
            record: null,
            branding: false,
            parentId: '',
            brandList: [],
            ifEdit: false,
            pushType: undefined,
            formTile: '新增'
        }
    },

    computed: {
        jobNumber() {
            return this.$store.getters.userInfo.workNo || ''
        }
    },

    beforeCreate() {
        this.form = this.$form.createForm(this, { name: 'category', brand: 'category' })
    },

    created() {
        const { content, type } = this.$props
        if (type == 1) {
            this.ifEdit = false

        } else {
            this.formTile = '编辑'
            this.ifEdit = true
            this.$nextTick(() => {
                this.form.setFieldsValue({ name: content.name })
            })
        }
        console.log(content);
    },

    methods: {
        handleSubmit(e) {
            e.preventDefault()
            this.form.validateFields((err, values) => {
                console.log(err, values)
                if (!err) {
                    this.submit(values)
                }
            })
        },
        async submit(values) {
            try {
                this.loading = true
                const { content, jobNumber } = this
                values.jobNumber = jobNumber
                values.type = 20
                if (this.ifEdit) {
                    values.id = content.id
                    values.parentId = content.parentId
                } else {
                    values.parentId = content.id
                }

                values.brand = content.brand
                const res = this.ifEdit ? await updateCategory(values) : await createCategory(values)
                if (res.code == 200) {
                    let text = this.ifEdit ? '编辑成功' : '添加下级成功'
                    this.$message.success(text)
                    this.reset()
                } else {
                    this.$message.error(res.msg || res.message)
                }
            } catch (error) {
                this.loading = false
                console.log(error)
            }
        },
        async searchBrand() {
            this.branding = true
            const data = {
                jobNumber: this.jobNumber
            }
            const res = await getSystemPro('brand', data)
            this.branding = false
            if (res.code == 200) {
                this.brandList = res.data
            } else {
                this.$message.error(res.msg || res.message)
            }
        },
        reset() {
            this.form.resetFields()
            this.loading = false
            this.fileList = []
            this.fileds = []
            this.$emit('closeDown')
        }
    }
};
</script>
  
<style scoped lang="less">
.info-action {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    // margin-bottom: 20px;
}

.ml-20 {
    margin-left: 20px;
}

.poster {
    width: 100px;
    height: 100px;
    margin-right: 20px;
    position: relative;

    &:hover {
        .img-modal {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .img {
        width: 100%;
        height: 100%;
    }

    .img-modal {
        background-color: rgba(0, 0, 0, 0.5);
        display: none;
        position: absolute;
        color: #fff;
        font-size: 20px;
        width: 100%;
        top: 0;
        height: 100%;
        left: 0;
    }
}

.fileList {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}
</style>